<template>
  <div>
    <div class="header">
      <div class="mine">我的</div>
    </div>
    <div
      class="body"
      @click="edit"
    >
      <div class="person">
        <div class="icon">
          <img
            v-if="imageUrl"
            :src="imageUrl"
            class="avatar"
          >
        </div>
        <div class="nackname">
          <div class="name">{{nackname}}</div>
        </div>
      </div>
      <div class="edit-person-info">编辑个人信息</div>
    </div>

    <div v-if="role =='1'">
      <pre class="dingdan">我的订单</pre>
      <div class="icon-mydingdan">

        <div
          class="hold"
          @click="order"
        >
          <i class="iconfont icon-daishouhuo">
            <mt-badge
              size="small"
              style="z-index:1;position:absolute;"
              color="rgb(219, 140, 37)"
            >5</mt-badge>
          </i>
          <div>待付款</div>
        </div>

        <div
          class="payment"
          @click="childOrder"
        >
          <i class="iconfont icon-daifukuan1">
            <mt-badge
              size="small"
              style="z-index:1;position:absolute;"
              color="rgb(219, 140, 37)"
            >3</mt-badge>
          </i>
          <div>订单</div>
        </div>

        <div
          class="fahuo"
          @click="daiShouHuo"
        >
          <i class="iconfont icon-daifahuo1">
            <mt-badge
              size="small"
              style="z-index:1;position:absolute;"
              color="rgb(219, 140, 37)"
            >4</mt-badge>
          </i>
          <div>待收货</div>
        </div>

        <div
          class="evaluate"
          @click="daiPingLun"
        >
          <i class="iconfont icon-daipingjia01"></i>
          <div>待评论</div>
        </div>
      </div>
      <div class="transit"></div>
    </div>

    <div v-if="role =='2'">
      <pre class="dingdan">我的服务</pre>
      <div class="icon-mydingdan">
        <div
          class="hold"
          @click="order"
        >
          <i class="iconfont icon-daishouhuo">
            <mt-badge
              size="small"
              style="z-index:1;position:absolute;"
              color="rgb(219, 140, 37)"
            >5</mt-badge>
          </i>
          <div>待付款</div>
        </div>

        <div
          class="payment"
          @click="daiQueding"
        >
          <i class="iconfont icon-daifukuan1">
            <mt-badge
              v-if="queding > 0"
              size="small"
              style="z-index:1;position:absolute;"
              color="rgb(219, 140, 37)"
            >{{queding}}</mt-badge>
          </i>
          <div>待确定</div>
        </div>

        <div
          class="fahuo"
          @click="daiShangMen"
        >
          <i class="iconfont icon-daifahuo1">
            <mt-badge
              v-if="shangmen > 0"
              size="small"
              style="z-index:1;position:absolute;"
              color="rgb(219, 140, 37)"
            >{{shangmen}}</mt-badge>
          </i>
          <div>待上门</div>
        </div>

        <div
          class="evaluate"
          @click="daiPingLun"
        >
          <i class="iconfont icon-daipingjia01"></i>
          <div>待评论</div>
        </div>
      </div>
    </div>
    <div class="transit"></div>

    <!-- changyong tool 用户-->
    <div>
      <pre class="dingdan">常用工具</pre>
      <div class="icon-mydingdan-">
        <div
          class="payment"
          @click="toParent"
        >
          <i class="iconfont icon-dizhi"></i>
          <div>关联父母</div>
        </div>

        <div class="fahuo">
          <i class="iconfont icon-jilu"></i>
          <div>健康管理</div>
        </div>

        <div class="hold">
          <i class="iconfont icon-qiandao"></i>
          <div>签到有礼</div>
        </div>

        <div class="evaluate">
          <i class="iconfont icon-yisheng"></i>
          <div>医生问诊</div>
        </div>
      </div>
      <div class="icon-mydingdan-">
        <div class="payment">
          <i class="iconfont icon-yijianfankui"></i>
          <div>意见反馈</div>
        </div>

        <div class="fahuo">
          <i class="iconfont icon-youhuiquan"></i>
          <div>优惠折扣</div>
        </div>

        <div class="hold">
          <i class="iconfont icon-weibiaoti2fuzhi01"></i>
          <div>绑定手环</div>
        </div>

        <div
          class="evaluate"
          @click="quit"
        >
          <i class="iconfont icon-ziyuan1"></i>
          <div>更多设置</div>
        </div>
      </div>
      <div class="transit"></div>
    </div>

    <!-- 护士栏目 -->
    <div>
      <pre class="dingdan">护士栏目</pre>
      <div class="icon-mydingdan-">
        <div
          class="fahuo"
          @click="toHealthManage"
        >
          <i class="iconfont icon-jilu"></i>
          <div>健康管理</div>
        </div>
        <div
          class="payment"
          @click="publicServer"
        >
          <i class="iconfont icon-yijianfankui"></i>
          <div>发布服务</div>
        </div>
        <div
          class="fahuo"
          @click="myServer"
        >
          <i class="iconfont icon-youhuiquan"></i>
          <div>我的服务</div>
        </div>
        <div class="evaluate">
          <i class="iconfont icon-yisheng"></i>
          <div>医生问诊</div>
        </div>
      </div>

      <div class="icon-mydingdan-">

        <div class="payment">
          <i class="iconfont icon-dizhi"></i>
          <div>关联他人</div>
        </div>
        <div class="hold">
          <i class="iconfont icon-qiandao"></i>
          <div>签到有礼</div>
        </div>

        <div class="hold">
          <i class="iconfont icon-weibiaoti2fuzhi01"></i>
          <div>绑定手环</div>
        </div>

        <div
          class="evaluate"
          @click="quit"
        >
          <i class="iconfont icon-ziyuan1"></i>
          <div>更多设置</div>
        </div>
      </div>

      <div class="transit"></div>
    </div>

    <!-- 医生栏目 -->
    <div>
      <pre class="dingdan">医生栏目</pre>
      <div class="icon-mydingdan-">
        <div class="payment">
          <i class="iconfont icon-yisheng"></i>
          <div>我的病人</div>
        </div>
        <div class="fahuo">
          <i class="iconfont icon-jilu"></i>
          <div>健康管理</div>
        </div>
        <div class="hold">
          <i class="iconfont icon-qiandao"></i>
          <div>签到有礼</div>
        </div>
        <div class="evaluate">
          <i class="iconfont icon-dizhi"></i>
          <div>我的咨询</div>
        </div>
      </div>
      <div class="icon-mydingdan-">
        <div class="payment">
          <i class="iconfont icon-yijianfankui"></i>
          <div>发布服务</div>
        </div>
        <div class="fahuo">
          <i class="iconfont icon-youhuiquan"></i>
          <div>我的服务</div>
        </div>
        <div class="hold">
          <i class="iconfont icon-weibiaoti2fuzhi01"></i>
          <div>绑定手环</div>
        </div>
        <div
          class="evaluate"
          @click="quit"
        >
          <i class="iconfont icon-ziyuan1"></i>
          <div>更多设置</div>
        </div>
      </div>

      <div class="transit"></div>
    </div>

    <div style="height:50px"></div>

    <my-nav></my-nav>
  </div>
</template>

<script>
import MyNav from "@/components/MyNav";

export default {
  data() {
    return {
      nackname: this.$store.getters["user/nackname"],
      account: this.$store.getters["user/account"],
      imageUrl: this.$store.getters["user/img"]
        ? this.$store.getters["user/img"]
        : "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      role: this.$store.getters["user/role"],
      id: this.$store.getters["user/id"],
      queding: localStorage.getItem("message"),
      shangmen: "",
    };
  },
  created() {
    console.log(this.role);
    //  this.getMessages()
    const params = {
      id: this.id,
      status: 2,
    };
    this.$http.post("/getMessages", params).then((res) => {
      console.log(res.data);
      if (res.data.code === "1") {
        // 将消息存到localStorage,全局使用
        this.shangmen = res.data.data.length;
        console.log(this.shangmen);
      }
    });
  },
  components: {
    MyNav,
  },
  methods: {
    edit() {
      console.log("11");
      this.$router.push({
        name: "editPersonMassage",
      });
    },
    toParent() {
      console.log("22");
      this.$router.push({
        name: "toParent",
      });
    },
    quit() {
      this.$router.push({
        name: "quit",
      });
    },
    toHealthManage() {
      this.$router.push({
        name: "healthManage",
      });
    },
    publicServer() {
      console.log("333");
      this.$router.push({
        name: "publicServer",
      });
    },
    myServer() {
      this.$router.push({
        name: "myServer",
      });
    },
    daiShangMen() {
      this.$router.push({
        name: "daiShangMen",
      });
    },
    daiQueding() {
      this.$router.push({
        name: "daiQueDing",
      });
    },
    daiShouHuo() {
      this.$router.push({
        name: "daiShouHuo",
      });
    },
    daiPingLun() {
      this.$router.push({
        name: "daiPingLun",
      });
    },
    childOrder() {
      this.$router.push({
        name: "childOrder",
      });
    },
    order() {
      this.$router.push({
        name: "order",
      });
    },
  },
};
</script>
<style scoped>
.body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.body .edit-person-info {
  margin-right: 10%;
  font-size: 0.45rem;
  color: #96d596;
}
.person {
  display: flex;
  margin: 2% 2% 0 2%;
  padding-bottom: 2%;
}
.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50px;
  margin-right: 2%;
}
.name {
  /* width: 100%; */
  /* padding-top:15%; */
  font-size: 0.45rem;
  text-align: center;
}
.nackname {
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-left: 3%; */
  margin: 5%;
}

.dingdan {
  margin: 3%;
  font-size: 0.45rem;
  font-weight: bold;
}
.header {
  height: 1.5rem;
  width: 100%;
  background: #96d596;
  text-align: center;
}
.header .mine {
  padding-top: 4%;
  font-size: 0.55rem;
  color: white;
}

.dingdan {
  margin: 3%;
  font-size: 0.45rem;
  font-weight: bold;
}
.icon-mydingdan {
  text-align: center;
  margin-top: 2%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 3%;
}
.icon-mydingdan .payment .iconfont {
  font-size: 0.9rem;
  color: rgb(219, 140, 37);
}
.icon-mydingdan .fahuo .iconfont {
  font-size: 0.9rem;
  color: rgb(219, 140, 37);
}
.icon-mydingdan .hold .iconfont {
  font-size: 0.9rem;
  color: rgb(219, 140, 37);
}
.icon-mydingdan .evaluate .iconfont {
  font-size: 0.9rem;
  color: rgb(219, 140, 37);
}
.transit {
  width: 100%;
  height: 0.45rem;
  background: rgb(242, 242, 242);
}
.icon-mydingdan- {
  text-align: center;
  margin-top: 2%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 3%;
}
.icon-mydingdan- .payment .iconfont {
  font-size: 0.9rem;
  color: rgb(171, 222, 171);
}
.icon-mydingdan- .fahuo .iconfont {
  font-size: 0.9rem;
  color: rgb(171, 222, 171);
}
.icon-mydingdan- .hold .iconfont {
  font-size: 0.9rem;
  color: rgb(171, 222, 171);
}
.icon-mydingdan- .evaluate .iconfont {
  font-size: 0.9rem;
  color: rgb(171, 222, 171);
}
</style>
